<template>
  <view>
    <view class="visit-box">
      <Head1 icon="index1/video" class="visit-title" clasName="icon-bg" title="访客监测数据" :showLine="false" titleColor="#ffffff" lineColor="#ffffff" arrowColor="#6891FA" url="/pages/visitorStatisticNew/index"></Head1>
      <view class="content-box">
        <DataItem2 class="visit-item" :clasName="`visit-cls ${i==list.length-1 ? 'w100' : ''}`" v-for="(item, i) in list" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rate="item.rate === '0.00' ? 0 : item.rate"></DataItem2>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import DataItem2 from '@/components/dataItem2/dataItem2.vue'
import { useInterval } from '@/utils/hooks';
import Head1 from './head1.vue'
import { getPersonStreamApi } from '@/api/index-zys.js'
import {getVisitorsCount} from '@/api/index.js'
const list = ref([
	{ title: '今日访客量', val: '0' ,rate:0, icon: '/static/index1/today_renliu.png'},
	{ title: '本周访客量', val: '0' ,rate:0, icon: '/static/index1/week_renliu.png'},
	{ title: '本月访客量', val: '0',rate:0, icon: '/static/index1/month_renliu.png'},
	{ title: '本年访客量', val: '0', icon: '/static/index1/year_renliu.png'}
])

const getPersonStream = () =>  {
  getPersonStreamApi().then(res=>{
    list.value[0].val = res.data.todayNum
    list.value[0].rate = (res.data.todayChange * 1).toFixed(2)
    list.value[1].val = res.data.weekNum
    list.value[1].rate = (res.data.weekChange * 1).toFixed(2)
    list.value[2].val = res.data.monthNum
    list.value[2].rate = (res.data.monthChange * 1).toFixed(2)
  })
	getVisitorsCount({area: '', timeType: 'year'}).then(res=> {
		console.log(res);
		list.value[3].val = res.data.thisNum;
		// list.value[3].rate = res.data.thisRatio
	})
}
getPersonStream();

// useInterval(() => {
//   getPersonStream();
// }, 1000 * 60, { immediate: true })

</script>
<style lang="scss" scoped>
.visit-box {
  margin: 0 -4rpx 10rpx;
  position: relative;
  z-index: 4;
  height: 450rpx;
  border-radius: 5rpx;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
	background: url('@/static/index2/visit.png') no-repeat left top;
	background-size: 100% 100%;
	// .visit-title {
	// 	:deep(.img-box) {
	// 		background: #fff;
	// 	  width: 38rpx;
	// 		height: 38rpx;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		border-radius: 50%;
	// 		image {
	// 			width: 34rpx;
	// 			height: 36rpx;
	// 		}
	// 	}
	// }
}
.content-box{
	display: flex;
	flex-wrap: wrap;
	DataItem2:last-of-type {
		min-width: 100%!important;
	}
	.visit-item {
		width: 48%;
		margin-bottom: 10rpx;
		margin-right: 1%;
		
		// :deep(image) {
		// 	margin-right: 20rpx;
		// }
		// :deep(.data_item_title) {
		// 	label{
		// 		color: #fff;
		// 	}
		// }
		// :deep(.data_item_value){ 
		// 	.value{
		// 		color: #fff;
		// 	}
		// 	.flex {
		// 		background: #fff;
		// 		height: 30rpx;
		// 		border-radius: 10rpx;
		// 		padding: 0 8rpx;
		// 		align-items: center;
		// 	}
		// }
	}
}


</style>